<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>物联网卡预警</title>
    <script type="text/javascript" src="${request.contextPath}/statics/libs/jquery.min.js"></script>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
</head>
<style type="text/css">
    .daoqi-table{
        width: 90%;
        height: 76%;
        border: 2px solid #6076ad;
        margin-left: 30px;
        border-collapse: collapse
    }
    .daoqi-tr1{
        background: #152f5b;
    }
    .daoqi{
        color: #fff;
        text-align: center;
        border: 1px solid #6076ad;
    }
    input::-webkit-input-placeholder {
        color:#fff;
        line-height: 27px;
    }
</style>
<body>

        <div class="kaung" style="width: 1150px;height:770px;position: relative;
        margin:70px auto; padding: 20px;
        background: url('../../statics/image/Popup.png')no-repeat; background-size: 100% 100%">
<!--            <button id="guanbi1" class="guanbi" style="background: url('../../statics/image/list_close.png') no-repeat;border: none;-->
<!--            background-size: 100% 100%;position: absolute;right: 50px;top:50px;-->
<!--            width: 16px;height: 16px"></button>-->
            <p class="title" style="color: #0efcff;font-size: 22px;text-align: center">物联网卡预警</p>
        <div class="top-left" style="position: absolute;left: 50px; width: 45%;height: 260px;background: #142747;border: 2px solid #384d79;
            box-shadow:  0px 0px 8px #3367c4 inset;">
            <p style="color: #0efcff;font-size: 16px;margin:10px 0 14px 20px">物联网卡到期提醒</p>
            <table class="daoqi-table">
                <tr class="daoqi-tr1">
                    <td class="daoqi">安装点</td>
                    <td class="daoqi">卡号</td>
                    <td class="daoqi">到期时间</td>
                </tr>
                <tr class="daoqi-tr">
                    <td class="daoqi">K405+030 </td>
                    <td class="daoqi">1568497513</td>
                    <td class="daoqi">2020-9-27</td></tr>
                <tr class="daoqi-tr">
                    <td class="daoqi">K405+030 </td>
                    <td class="daoqi">1568497513</td>
                    <td class="daoqi">2020-9-27</td></tr>
                </tr>
                <tr>
                    <td class="daoqi">K405+030 </td>
                    <td class="daoqi">1568497513</td>
                    <td class="daoqi">2020-9-27</td></tr>
                </tr>
            </table>
        </div>
        <div class="top-right" style="position: absolute;right: 50px; width: 45%;height: 260px;background: #142747;border: 2px solid #384d79;
            box-shadow:  0px 0px 8px #3367c4 inset;">
            <p style="color: #0efcff;font-size: 16px;margin:10px 0 14px 20px">物联网卡剩余流量提醒</p>
            <table class="daoqi-table">
                <tr class="daoqi-tr1">
                    <td class="daoqi">安装点</td>
                    <td class="daoqi">卡号</td>
                    <td class="daoqi">剩余流量</td>
                </tr>
                <tr class="daoqi-tr">
                    <td class="daoqi">K405+030 </td>
                    <td class="daoqi">1568497513</td>
                    <td class="daoqi" >230G</td></tr>
                <tr class="daoqi-tr">
                    <td class="daoqi">K405+030 </td>
                    <td class="daoqi">1568497513</td>
                    <td class="daoqi">230G</td></tr>
                </tr>
                <tr>
                    <td class="daoqi">K405+030 </td>
                    <td class="daoqi">1568497513</td>
                    <td class="daoqi">230G</td></tr>
                </tr>
            </table>
        </div>
            <div class="bot" style="position: absolute;bottom:40px;left:50px;width: 91.4%;height: 396px;background: #142747;
            box-shadow:  0px 0px 8px #3367c4 inset;border: 2px solid #384d79;">

                <input type="text" placeholder="查找条件" style="border: 2px solid #6076ad;color: #fff;font-size: 16px;
                margin: 14px 0 14px 20px;background: none;height: 26px;padding-left: 36px;
                background: url('../../statics/image/chazhao.png') no-repeat;
                   background-position: 4px">

                <table class="daoqi-table" style="width: 94.8%;height: 78%">
                    <tr class="daoqi-tr1">
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                    </tr>
                    <tr class="daoqi-tr">
                        <td class="daoqi"> </td>
                        <td class="daoqi"></td>
                        <td class="daoqi" ></td>
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                    </tr>
                    <tr class="daoqi-tr">
                        <td class="daoqi"> </td>
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                    </tr>
                    <tr class="daoqi-tr">
                        <td class="daoqi"> </td>
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                    </tr>
                    <tr class="daoqi-tr">
                        <td class="daoqi"> </td>
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                    </tr>
                    <tr class="daoqi-tr">
                    <td class="daoqi"> </td>
                    <td class="daoqi"></td>
                    <td class="daoqi"></td>
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                        <td class="daoqi"></td>
                </tr>

                </table>
            </div>
        </div>

</body>
</html>

    <script type="text/javascript">
        $(function(){
            $('#guanbi1').click(function(){
               $('.bb1').hide()
         })
     })
    </script>